<template>
    <div class="semester-intro">
      <div class="header">      
        <div class="kuang">
          <h1>{{ courseName }}</h1>
          <!-- <ul class="info">
            <li> <div>章节</div>     <div>{{ chapters }}</div> </li>
            <li> <div>视频</div>     <div>{{ videos }}</div> </li>
            <li> <div>课件</div>     <div>{{ courseware }}</div> </li>
            <li> <div>学习人数</div> <div>{{ studentCount }}</div> </li> 
          </ul> -->
        </div>
  
      
        </div>      
      </div>
      
      <div class="bg">
        
        <div class="container">
          <div class="content">
            <div class="kcjs">
              <h2 class="section-title">课程介绍</h2>
              <hr class="section-line">
              <p>{{ introduction }}</p>
              <img :src="introImage" alt="Course Intro Image">
            </div>
          </div>
        
          <div class="sidebar">
            <!-- <div class="kcgg">
              <h2 class="section-title">课程公告</h2>
              <hr class="section-line">
              <p>{{ noticeTitle }}</p>
              <p>{{ noticeContent }}</p>
            </div> -->
            
            <div class="jxtd">
              <h3 class="section-title">教学团队</h3>
              <hr class="section-line">
              <ul class="team">
                <!-- 使用 v-for 指令循环渲染技术列表数据 -->
                 <li v-for="teacher in teachers" :key="teacher.username">
                  <img :src="teacher.avatar" alt="教师头像" width="60" height="60">
                  <div class="identity">
                  {{ teacher.username }}
                </div>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
   
  </template>
  
  <script>
  import axios from 'axios';
  
  export default {
    name: 'CourseIntro',
    data() {
      return {
        courseName: '',
        introduction: '',
        introImage: '',
        noticeTitle: '',
        noticeContent: '',
        
        teachers: [],
        semesterIds:0,
        showModal: false
      };
    },
   
    mounted() {
     // 获取路由中的查询参数 semesterIds
    this.semesterIds = this.$route.query.semesterIds;  // 使用正确的属性名
    console.log('Semester IDs:', this.semesterIds); // 输出到控制台，检查参数是否正确获取到
  
    // 调用获取课程数据的方法，可以根据需要命名为 fetchCourseData
    this.fetchCourseData();
    },
    methods: {
      async fetchCourseData() {      
        try {
          // 同时发起两个请求
          const [teachersResponse, courseInfoResponse] = await Promise.all([
            axios.get('http://10.33.124.200:8080/teacher/showteam', {
              params: {
                semester_id: 1,          
              }
            }),
            axios.get('http://10.33.124.200:8080/semesters/showbase', {
              params: {
                semester_id: 5,             
              }
            })
          ]);
          const teachersData = teachersResponse.data.data;
          const courseInfoData = courseInfoResponse.data.data;
          teachersData.forEach(teachersData => {
    // 将接口返回的数据转换为需要的格式
    const teacher = {
      id: teachersData.id, 
      username: teachersData.username,
      avatar: teachersData.img_url
    };
    // 将课程对象添加到 courses 数组中
    this.teachers.push(teacher);
  });
          this.courseName = courseInfoData.semester_name;
         
          this.introduction = courseInfoData.semester_intro;
         
          this.introImage = courseInfoData.resource_url;
          this.noticeTitle = courseInfoData.notice_title;
          this.noticeContent=courseInfoData.notice_content;   
        } catch (error) {
          console.error('Error fetching course data:', error);
          if (error.response) {
      console.error('Response status:', error.response.status);
      console.error('Response data:', error.response.data);
    }
        }
      },
   
    }
  };
  </script>
  <style scoped>
  
  .course-intro {
    display: flex;
    flex-direction: column;
  }
  .header {
    text-align: left;
    padding-left: 160px;
    height:140px;
    background-size: cover; /* 背景图尺寸适应容器 */
    background-image: url('@/assets/course_intro_bg.png');
    color:white;
  }
  
  .kuang{
     width: 600px;
  }
  
  .info {
    list-style: none;
    display: flex;
    max-width: 500px;
    padding: 0;
    margin: 0px; 
    /* justify-content: space-around; */
  }
  .info li {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;  margin-right: 30px; /*间距值 */
    color:white;
  }
  .bg{
    background-color: #f9f9f9;
    
  }
  
  
  
  
  .span1 {
    color: rgb(93, 92, 92);
  }
  
  
  .container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* 在大屏幕上内容水平居中 */
    width: 1000px;
    margin-right: auto;
    margin-left: auto;
    min-height: 100vh; 
  }
  
  .content {
    flex: 1 1 auto; 
    max-width: calc(70% - 20px); 
    margin-right: 20px; 
  }
  
  .sidebar {
    flex: 1 1 auto; 
    max-width: 30%; 
  }
  .section-title {
    font-size: 25px; 
    font-weight: bold; /* 标题加粗 */
    text-align: center; /* 标题居中 */
    margin-bottom: 10px; /* 标题与内容之间的间距 */
  }
  .section-line {
    border-top: 1px solid #ccc; /* 分隔线样式 */
    margin: 10px 0; /* 分隔线与内容之间的间距 */
  }
  .kcjs{
   
    background-color: #fff;
    border-radius: 10px;
    margin-top: 20px;
    padding: 20px;
    border: 2px solid rgb(243, 241, 241); 
  }
  
  .jxtd{
    background-color: #fff;
    border-radius: 10px;
    padding: 20px;
    margin-top: 20px;
    border: 2px solid rgb(243, 241, 241); 
  }
  
  
  .kcjs img {
    max-width: 100%; 
    height: auto; 
    margin: 0 auto; /* 图片水平居中 */
   
  }
  
  .team {
    list-style: none;
    display: flex;
    padding: 0;
    justify-content: center;
  }
  .team li {
    margin-bottom: 10px;
    align-items: center;
  }
  .team li img {
    border-radius: 50%; /* 圆形头像 */
  }
  </style>
  